import React from 'react';
import {Tag} from 'antd';
import './TagWall.css';

const TagWall = ({tags, title}) => {
    const getRandomColor = () => {
        const colors = [
            '#f50',
            '#2db7f5',
            '#87d068',
            '#108ee9',
            '#eb2f96',
            '#722ed1',
        ];
        const randomIndex = Math.floor(Math.random() * colors.length);
        return colors[randomIndex];
    };

    return (
        <div className='tag-wall-container'>
            <h2 className='tag-wall-title'>{title}</h2>
            <div className='tag-wall-content'>
                {tags.map((tag, index) => (
                    <Tag
                        key={index}
                        className='tag'
                        style={{backgroundColor: getRandomColor(), opacity: 0.9}}>
                        {tag}
                    </Tag>
                ))}
            </div>
        </div>
    );
};

export default TagWall;
